<template>
   <div class="text-left learn-svg-box">
       <div class="page-sub-header">
           <h1>Learn Svg</h1>
       </div>
       <div class="app-page-body">
           <div class="app-page-container">
                <h2>滤镜元素</h2>

                <div>
                    <h3>feBlend</h3>
                    <p class="note">feBlend滤镜把两个对象组合在一起，使它们受特定的混合模式控制。这类似于图像编辑软件中混合两个图层。该模式由属性mode定义</p>
                    <h4>用法：</h4>
                    <p>
                        内容物：任意数量、任意排序的 &lt;animate&gt;, &lt;set&gt;
                    </p>
                    <h4>属性：</h4>
                    <p>
                        全局属性：
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core" target="_blank">核心属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation" target="_blank">外观属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Filter" target="_blank">滤镜属性属性</a>、
                        class、style
                    </p>
                    <p class="note">
                        专有属性：in、in2、mode
                    </p>
                    <h4>示例：</h4>
                    <div>
                        <h5>mode: multiply</h5>
                        <div class="com-row">
                            <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="spotlight">
                                        <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1" />
                                        <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
                                    </filter>
                                </defs>
                                <image xlink:href="../../assets/test.jpg" x="10%" y="10%" width="80%" height="80%" />
                            </svg>
                            <svg width="500" height="500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <defs>
                                    <filter id="spotlight">
                                        <feFlood result="floodFill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1" />
                                        <feBlend in="SourceGraphic" in2="floodFill" mode="multiply" />
                                    </filter>
                                </defs>
                                <image xlink:href="../../assets/test.jpg" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);" />
                            </svg>
                        </div>
                    </div>
                </div>

                <div>
                    <h3>feColorMatrix</h3>
                    <p class="note">该滤镜基于转换矩阵对颜色进行变换。每一像素的颜色值(一个表示为[红,绿,蓝,透明度] 的矢量) 都经过矩阵乘法 (matrix multiplated) 计算出的新颜色。</p>
                    <h4>用法：</h4>
                    <p>
                        内容物：任意数量、任意排序的 &lt;animate&gt;, &lt;set&gt;
                    </p>
                    <h4>属性：</h4>
                    <p>
                        全局属性：
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core" target="_blank">核心属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation" target="_blank">外观属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Filter" target="_blank">滤镜属性属性</a>、
                        class、style
                    </p>
                    <p class="note">
                        专有属性：in、type、values
                    </p>
                    <h4>示例：</h4>
                    <div>
                        <div class="com-row">
                            <svg width="100%" height="100%" viewBox="0 0 1000 360" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <text x="70" y="50">Reference</text>
                                <g>
                                    <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
                                    <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
                                    <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
                                </g>

                                <text x="70" y="120">matrix</text>
                                <filter id="colorMeMatrix">
                                    <feColorMatrix
                                        in="SourceGraphic"
                                        type="matrix"
                                        values="0 0 0 0 0
                                                1 1 1 1 0
                                                0 0 0 0 0
                                                0 0 0 1 0" />
                                </filter>
                                <g filter="url(#colorMeMatrix)">
                                    <circle cx="30" cy="100" r="20" fill="blue"  fill-opacity="0.5" />
                                    <circle cx="20" cy="120" r="20" fill="green" fill-opacity="0.5" />
                                    <circle cx="40" cy="120" r="20" fill="red"   fill-opacity="0.5" />
                                </g>

                                <text x="70" y="190">saturate</text>
                                <filter id="colorMeSaturate">
                                    <feColorMatrix
                                        in="SourceGraphic"
                                        type="saturate"
                                        values="0.2" />
                                </filter>
                                <g filter="url(#colorMeSaturate)">
                                    <circle cx="30" cy="170" r="20" fill="blue" fill-opacity="0.5" />
                                    <circle cx="20" cy="190" r="20" fill="green" fill-opacity="0.5" />
                                    <circle cx="40" cy="190" r="20" fill="red" fill-opacity="0.5" />
                                </g>

                                <text x="70" y="260">hueRotate</text>
                                <filter id="colorMeHueRotate">
                                    <feColorMatrix
                                        in="SourceGraphic"
                                        type="hueRotate"
                                        values="180" />
                                </filter>
                                <g filter="url(#colorMeHueRotate)">
                                    <circle cx="30" cy="240" r="20" fill="blue"  fill-opacity="0.5" />
                                    <circle cx="20" cy="260" r="20" fill="green" fill-opacity="0.5" />
                                    <circle cx="40" cy="260" r="20" fill="red"   fill-opacity="0.5" />
                                </g>

                                <text x="70" y="320">luminanceToAlpha</text>
                                <filter id="colorMeLTA">
                                    <feColorMatrix
                                        in="SourceGraphic"
                                        type="luminanceToAlpha" />
                                </filter>
                                <g filter="url(#colorMeLTA)">
                                    <circle cx="30" cy="310" r="20" fill="blue"  fill-opacity="0.5" />
                                    <circle cx="20" cy="330" r="20" fill="green" fill-opacity="0.5" />
                                    <circle cx="40" cy="330" r="20" fill="red"   fill-opacity="0.5" />
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>

                <div>
                    <h3>feComponentTransfer</h3>
                    <p class="note">SVG滤镜基元对每个像素执行颜色分量的数据重映射.它允许进行像亮度调整,对比度调整,色彩平衡或阈值的操作。计算是使用非预乘色值进行执行的.(译者:什么是非预乘数据:非预乘数据可以理解为例如rgba(180,160,130,0.8))中的180,160,130,它们没有被除以255以及乘以透明度0.8而转化为0~1范围的值,当被除以255并且乘以0.8而转化为0~1范围中的值的预处理被称为premultiplied color value(预乘数据)).颜色值在每一个通道(R,G,B,A)中被分别修改然后输出,这些通道分别是 &lt;feFuncR&gt;, &lt;feFuncB&gt;, &lt;feFuncG&gt;, and &lt;feFuncA&gt;</p>
                    <h4>用法：</h4>
                    <p>
                        内容物：任意数量、任意排序的 &lt;feFuncR&gt;, &lt;feFuncB&gt;, &lt;feFuncG&gt;, &lt;feFuncA&gt;
                    </p>
                    <h4>属性：</h4>
                    <p>
                        全局属性：
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core" target="_blank">核心属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation" target="_blank">外观属性</a>、
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Filter" target="_blank">滤镜属性属性</a>、
                        class、style
                    </p>
                    <p class="note">
                        专有属性：in
                    </p>
                    <h4>示例：</h4>
                    <div>
                        <div class="com-row minh-100">
                            <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 600 300">
                                <defs>
                                    <linearGradient id="rainbow" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="100%" y2="0">
                                        <stop offset="0" stop-color="#ff0000"></stop>
                                        <stop offset="0.2" stop-color="#ffff00"></stop>
                                        <stop offset="0.4" stop-color="#00ff00"></stop>
                                        <stop offset="0.6" stop-color="#00ffff"></stop>
                                        <stop offset="0.8" stop-color="#0000ff"></stop>
                                        <stop offset="1" stop-color="#800080"></stop>
                                    </linearGradient>
                                    <filter id="identity" x="0" y="0" width="100%" height="100%">
                                        <feComponentTransfer>
                                            <feFuncR type="identity"></feFuncR>
                                            <feFuncG type="identity"></feFuncG>
                                            <feFuncB type="identity"></feFuncB>
                                            <feFuncA type="identity"></feFuncA>
                                        </feComponentTransfer>
                                    </filter>
                                    <filter id="table" x="0" y="0" width="100%" height="100%">
                                        <feComponentTransfer>
                                            <feFuncR type="table" tableValues="0 0 1 1"></feFuncR>
                                            <feFuncG type="table" tableValues="1 1 0 0"></feFuncG>
                                            <feFuncB type="table" tableValues="0 1 1 0"></feFuncB>
                                        </feComponentTransfer>
                                    </filter>
                                    <filter id="linear" x="0" y="0" width="100%" height="100%">
                                        <feComponentTransfer>
                                            <feFuncR type="linear" slope="0.5" intercept="0"></feFuncR>
                                            <feFuncG type="linear" slope="0.5" intercept="0.25"></feFuncG>
                                            <feFuncB type="linear" slope="0.5" intercept="0.5"></feFuncB>
                                        </feComponentTransfer>
                                    </filter>
                                    <filter id="gamma" x="0" y="0" width="100%" height="100%">
                                        <feComponentTransfer>
                                            <feFuncR type="gamma" amplitude="4" exponent="7" offset="0"></feFuncR>
                                            <feFuncG type="gamma" amplitude="4" exponent="4" offset="0"></feFuncG>
                                            <feFuncB type="gamma" amplitude="4" exponent="1" offset="0"></feFuncB>
                                        </feComponentTransfer>
                                    </filter>
                                </defs>

                                <g font-weight="bold">
                                    <text x="0" y="5%">Default</text>
                                    <rect x="0" y="6%" width="100%" height="20"></rect>
                                    <text x="0" y="20%">Identity</text>
                                    <rect x="0" y="21%" width="100%" height="20" style="filter:url(#identity)"></rect>
                                    <text x="0" y="35%">Table lookup</text>
                                    <rect x="0" y="36%" width="100%" height="20" style="filter:url(#table)"></rect>
                                    <text x="0" y="50%">Linear function</text>
                                    <rect x="0" y="51%" width="100%" height="20" style="filter:url(#linear)"></rect>
                                    <text x="0" y="65%">Gamma function</text>
                                    <rect x="0" y="66%" width="100%" height="20" style="filter:url(#gamma)"></rect>
                                    <text x="0" y="80%">Rainbow</text>
                                    <rect x="0" y="81%" width="100%" height="20" style="fill:url(#rainbow)"></rect>
                                </g>
                            </svg>
                        </div>
                    </div>
                </div>

                <div>
                    <h3>feDropShadow</h3>
                    <p class="note">SVG &lt;fedropshadow&gt;过滤器创建输入图像的简单投影。&lt;fedropshadow&gt;它只能在&lt;filter&gt;元素中使用。</p>
                    <h4>用法：</h4>
                    <p>
                        内容物：任意数量、任意排序的 &lt;animate&gt;, &lt;script&gt;, &lt;set&gt;
                    </p>
                    <h4>属性：</h4>
                    <p>
                        全局属性：
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core" target="_blank">核心属性</a>、
                        <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/Presentation" target="_blank">外观属性</a>：重要属性flood-color, flood-opacity、
                        <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#Filters_Attributes" target="_blank">滤镜属性属性</a>：重要属性height, in, result, x, y, width、
                        class、style
                    </p>
                    <p class="note">
                        专有属性：dx、dy、stdDeviation
                    </p>
                    <h4>示例：</h4>
                    <div>
                        <div class="com-row">
                            <svg width="100" height="100" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
                                <defs>
                                    <filter id="shadow">
                                        <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
                                    </filter>
                                </defs>
                                <circle cx="50%" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />
                            </svg>
                        </div>
                    </div>
                </div>

                <div>
                    <h3>feGaussianBlur</h3>
                    <p class="note">该滤镜对输入图像进行高斯模糊，属性stdDeviation中指定的数量定义了钟形。</p>
                    <h4>用法：</h4>
                    <p>
                        内容物：任意数量、任意排序的 &lt;animate&gt;, &lt;set&gt;
                    </p>
                    <h4>属性：</h4>
                    <p>
                        全局属性：
                        <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Core" target="_blank">核心属性</a>、
                        <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/Presentation" target="_blank">外观属性</a>、
                        <a href="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute#Filters_Attributes" target="_blank">滤镜属性属性</a>、
                        class、style
                    </p>
                    <p class="note">
                        专有属性：in、stdDeviation
                    </p>
                    <h4>示例：</h4>
                    <div>
                        <div class="com-row">
                            <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <filter id="blurMe">
                                    <feGaussianBlur in="SourceGraphic" stdDeviation="5" />
                                </filter>
                                <circle cx="60"  cy="60" r="50" fill="green" />
                                <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurMe)" />
                            </svg>
                            <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                                <filter id="dropShadow">
                                    <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
                                    <feOffset dx="2" dy="4" />
                                    <feMerge>
                                        <feMergeNode />
                                        <feMergeNode in="SourceGraphic" />
                                    </feMerge>
                                </filter>
                                <circle cx="60"  cy="60" r="50" fill="green" filter="url(#dropShadow)" />
                            </svg>
                        </div>
                    </div>
                </div>
           </div>
       </div>
   </div>
</template>

<script src="./index.js"></script>

<style scoped lang="scss">
   @import "./default.sass";
</style>
